<template>
  <div
    style="
      width: 1200px;
      margin: 0 auto;
      padding: 20px;
      min-height: calc(100vh - 40px);
    "
  >
    <el-button
      style="display: flex"
      type="primary"
      @click="$router.push('/main/xingzheng/gdzczhuxiao/gdzczhuxiao')"
      icon="el-icon-back"
      >返回</el-button
    >
    <h2 class="page-title">固定资产注销申请单列表</h2>
    <div class="filter-container">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="月份">
          <el-date-picker
            v-model="queryParams.month"
            type="month"
            placeholder="选择月份"
            format="yyyy-MM"
            value-format="yyyy-MM"
            @change="handleQuery"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="部门">
          <el-input
            v-model="queryParams.department"
            placeholder="请输入部门"
            clearable
            @keyup.enter.native="handleQuery"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button type="success" @click="handleAdd">新增</el-button>
          <el-button
            type="danger"
            @click="handleBatchDelete"
            :disabled="selectedIds.length === 0"
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column
        prop="requestNo"
        label="申请单编号"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="custodyDepartment"
        label="保管部门"
        width="150"
      ></el-table-column>
      <el-table-column label="申请日期" width="120">
        <template slot-scope="scope">
          {{ scope.row.applicationDate }}
        </template>
      </el-table-column>
      <el-table-column
        prop="assetName"
        label="资产名称"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="assetNumber"
        label="资产编号"
        width="150"
      ></el-table-column>
      <el-table-column label="资产类型" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.isEquipment">设备</span>
          <span v-if="scope.row.isInstrument">仪器</span>
          <span v-if="scope.row.isFixture">治具</span>
          <span v-if="scope.row.isTool">工具</span>
          <span v-if="scope.row.isOther">其它</span>
        </template>
      </el-table-column>
      <el-table-column label="注销类型" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.isScrapped">报废</span>
          <span v-if="scope.row.isLost">遗失</span>
          <span v-if="scope.row.isSoldAtDiscount">折价出售</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
      ></el-table-column>
      <el-table-column label="操作" width="250" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleView(scope.row)"
            >查看</el-button
          >
          <el-button size="mini" type="success" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getFixedAssetCancellationList,
  deleteFixedAssetCancellation,
  batchDeleteFixedAssetCancellation,
} from "@/api/fixedAssetCancellation";

export default {
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        month: "",
        department: "",
      },
      selectedIds: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      this.loading = true;
      try {
        const response = await getFixedAssetCancellationList(this.queryParams);
        if (response.data && response.data.code === 200) {
          this.tableData = response.data.data.records || [];
          this.total = response.data.data.total || 0;
        } else {
          this.$message.error(response.data.message || "获取列表失败");
        }
      } catch (error) {
        this.$message.error("获取列表失败：" + error.message);
      } finally {
        this.loading = false;
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    handleSelectionChange(selection) {
      this.selectedIds = selection.map((item) => item.id);
    },
    handleAdd() {
      this.$router.push("/main/xingzheng/gdzczhuxiao/gdzczhuxiao");
    },
    handleView(row) {
      this.$router.push(
        `/main/xingzheng/gdzczhuxiao/gdzczhuxiao?id=${row.id}&type=view`
      );
    },
    handleEdit(row) {
      this.$router.push(
        `/main/xingzheng/gdzczhuxiao/gdzczhuxiao?id=${row.id}&type=edit`
      );
    },
    async handleDelete(row) {
      try {
        await this.$confirm("确认删除该记录吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });

        const response = await deleteFixedAssetCancellation(row.id);
        if (response.data && response.data.code === 200) {
          this.$message.success("删除成功");
          this.getList();
        } else {
          this.$message.error(response.data.message || "删除失败");
        }
      } catch (error) {
        if (error !== "cancel") {
          this.$message.error("删除失败：" + error.message);
        }
      }
    },
    async handleBatchDelete() {
      if (this.selectedIds.length === 0) {
        this.$message.warning("请选择要删除的记录");
        return;
      }

      try {
        await this.$confirm(
          `确认删除选中的 ${this.selectedIds.length} 条记录吗？`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );

        const response = await batchDeleteFixedAssetCancellation(
          this.selectedIds
        );
        if (response.data && response.data.code === 200) {
          this.$message.success("批量删除成功");
          this.getList();
        } else {
          this.$message.error(response.data.message || "批量删除失败");
        }
      } catch (error) {
        if (error !== "cancel") {
          this.$message.error("批量删除失败：" + error.message);
        }
      }
    },
  },
};
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.page-title {
  font-size: 20px;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}
</style> 